<template>
  <div class="login">
  <!-- 头部首页搜索购物车 -->
    <div class="top flex">
      <div class="home">
        <image class="img" src="../../static/sy.png" mode="widthFix"/>
      </div>
      <div class="yx">网易严选</div>
      <div class="right flex">
        <image class="ss" src="../../static/ss.png" mode="widthFix"/>
        <image class="gwc" src="../../static/gwc.png" mode="widthFix"/>
      </div>
    </div>
    <!-- 中间俩按钮 -->
    <div class="body" v-if="show">
      <div class="body_top flex_c">
        <image class="img" src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" mode="widthFix"/>
        <button @click="handler" class="phone">手机号快捷登录</button>
        <button class="email">邮箱账号登录</button>
      </div>
      <!-- 底部ssb -->
      <div class="body_bottom flex_c">
        <div class="tb flex">
          <div class="wx flex">
            <image class="img" src="../../static/wx.png" mode="widthFix"/>
            <div class="title">微信</div>
          </div>
          <div class="qq flex">
            <image class="img" src="../../static/QQ.png" mode="widthFix"/>
            <div class="title">QQ</div>
          </div>
          <div class="wb flex">
            <image class="img" src="../../static/wb.png" mode="widthFix"/>
            <div class="title">微博</div>
          </div>
        </div>
      </div>
    </div>
    <div class="dl" v-else>
      <div class="body_top flex_c">
        <image class="img" src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" mode="widthFix"/>
        <div class="form">
          <input class="inp" type="text" v-model="phone" placeholder="请输入手机号">
          <input class="inp" type="password" v-model="password" placeholder="请输入密码">
          <div class="floor flex">
            <div class="left">忘记密码 ?</div>
            <div class="right">短信快捷登录</div>
          </div>
          <button class="btn" @click="login">登录</button>
        </div>
        <div class="footer">其他登陆方式 ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//引入vue相关
import {ref} from 'vue'
//引入api接口
import {reqLogin} from '@/api/index'
//引入uni相关
import {} from '@dcloudio/uni-app'

//定义响应式数据
let show = ref<any>(true)
//手机号
let phone = ref<any>('')
//密码
let password = ref<any>('')


//定义方法
//手机号登录按钮的回调
const handler = ()=>{
  //显示手机号登录
  show.value = false
}
//登录按钮的回调
const login = async ()=>{
  let data = {phone:phone.value,password:password.value}
  let result = await reqLogin(data) 
  console.log(result.data);
  if(result.code==200){
    //存TOken
    uni.setStorageSync('TOKEN', result.data.token)
    uni.setStorageSync('NAME', result.data.name)
    uni.navigateBack({
      delta: 1
    })
  }
}




</script>

<style scoped lang="less">
.login{
  width: 100%;
  height: 100%;
  // position: relative;
  .top{
    width: 100%;
    height: 80rpx;
    border-bottom: 1px solid #ccc ;
    align-items: center;
    .home{
      width: 18%;
      padding: 20rpx;
      .img{
        width: 50rpx;
      }
    }
    .yx{
      width: 60%;
      text-align: center;
      font-weight: 900;
    }
    .right{
      width: 22%;
      justify-content: space-around;
      .ss{
        width: 50rpx;
      }
      .gwc{
        width: 50rpx;
      }
    }
  }
  .body{
    background-color: #f1f1f1;
    width: 100%;
    height: 100%;
    .body_top{
      align-items: center;
      .img{
        width: 40%;
        margin: 120rpx 0;
      }
      .phone{
        width: 80%;
        color: white;
        background-color: red;
        font-size: 28rpx;
        height: 90rpx;
        line-height: 90rpx;
        margin-bottom: 40rpx;
      }
      .email{
        width: 80%;
        color: red;
        background-color: white;
        border: 1px solid red;
        height: 90rpx;
        line-height: 90rpx;
        font-size: 28rpx;
      }
    }
    .body_bottom{
      width: 100%;
      position: absolute;
      bottom: 70rpx;
      align-items: center;
      .tb{
        .flex{
          width: 200rpx;
          border-right: 1px solid black;
          justify-content: center;
          .img{
            width: 40rpx;
            margin-right: 10rpx;
          }
        }
        .wb{
          border-right: none;
        }
      }
      
    }
  }
  .dl{
    .body_top{
      align-items: center;
      .img{
        width: 35%;
        margin: 50rpx 0;
      }
      .form{
        width: 100%;
        margin: 90rpx 0;
        padding: 40rpx;
        box-sizing: border-box;
        .inp{
          width: 100%;
          height: 80rpx;
          line-height: 80rpx;
          font-size: 28rpx;
          border-bottom: 1px solid #ccc;
        }
        .floor{
          justify-content: space-between;
          font-size: 28rpx;
          margin: 30rpx 0;
          .left{
            color: #ccc;
          }
        }
        .btn{
          background-color: red;
          color: white;
          font-size: 28rpx;
          height: 90rpx;
          line-height: 90rpx;
        }
      }
      .footer{
        font-size: 28rpx;
      }
    }
  }
}
</style>